<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap1{
		    float:left;
			width: 100px;
			height: 100px;
			border:5px solid #000;
		    overflow: auto;<!--由浏览器决定如何显示。如果需要，则显示滚动条。-->
		}
		.box1{
			width: 150px;
			height: 150px;
			background-color: red;
        }
		
		.wrap2{
		    float:left;
		    width:100px;
            height:100px;
            border:5px solid black;
            overflow:visible;<!--内容不会被修剪，会呈现在元素框之外。-->			
		}
		.box2{
		    width:120px;
			height:120px;
			background:red;
		}
		
		.wrap3{
		    float:left;
		    width:100px;
			height:100px;
			border:5px solid black;
			overflow:hidden;<!--内容会被修剪，但是浏览器不会显示供查看内容的滚动条。-->
		}
		.box3{
			width:120px;
			height:120px;
			background:red;	
		}
		
		.bg1{
		    clear:both;
		}
		
		.wrap4{
		    width:100px;
			height:100px;
			border:5px solid black;
			overflow:scroll;<!--内容会被修剪，浏览器会显示滚动条以便查看其余的内容。-->
		}
		.box4{
		    width:120px;
			height:120px;
			background:red;
		}
	</style>
</head>
<body>
	<div class="wrap1">
		<div class="box1">有花堪折直需折，莫待无花空折枝。1</div>	
	</div>
	
	<div class="wrap2">
	    <div class="box2">有花堪折直需折，莫待无花空折枝。2</div>
	</div>
	
	<div class="wrap3">
	    <div class="box3">有花堪折直需折，莫待无花空折枝。3</div>
	</div>
	
	<div class="bg1"></div>
	
	<div class="wrap4">
	    <div class="box4">有花堪折直需折，莫待无花空折枝。4</div>
	</div>
</body>
</html>